import { useQuery } from '@tanstack/react-query';
import { courseApi } from '../api/course';
import { Link } from 'react-router-dom';

export function Home() {
  const { data: popularResponse } = useQuery({
    queryKey: ['popularCourses'],
    queryFn: () => courseApi.getPopularCourses().then((res: any) => res.data),
  });

  const { data: freeResponse } = useQuery({
    queryKey: ['freeCourses'],
    queryFn: () => courseApi.getFreeCourses().then((res: any) => res.data),
  });

  const popularCourses = popularResponse?.data || popularResponse;
  const freeCourses = freeResponse?.data || freeResponse;

  return (
    <div className="space-y-8">
      <div className="text-center py-12 bg-gradient-to-r from-blue-600 to-purple-600 text-white rounded-lg">
        <h1 className="text-4xl font-bold mb-4">欢迎来到在线学习平台</h1>
        <p className="text-xl mb-6">发现优质课程，开启学习之旅</p>
        <Link
          to="/courses"
          className="bg-white text-blue-600 px-6 py-3 rounded-lg font-semibold hover:bg-gray-100"
        >
          浏览所有课程
        </Link>
      </div>

      <div>
        <h2 className="text-2xl font-bold mb-4">热门课程</h2>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {popularCourses?.slice(0, 6).map((course: any) => (
            <div key={course.id} className="bg-white rounded-lg shadow hover:shadow-lg transition">
              <img 
                src={course.thumbnail || 'https://via.placeholder.com/300x200'} 
                alt={course.title}
                className="w-full h-48 object-cover rounded-t-lg"
              />
              <div className="p-4">
                <h3 className="font-semibold text-lg mb-2">{course.title}</h3>
                <p className="text-gray-600 text-sm mb-2">{course.description}</p>
                <div className="flex justify-between items-center">
                  <span className="text-xl font-bold text-blue-600">
                    {course.price === 0 ? '免费' : `¥${course.price}`}
                  </span>
                  <Link 
                    to={`/courses/${course.id}`}
                    className="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700"
                  >
                    查看详情
                  </Link>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>

      <div>
        <h2 className="text-2xl font-bold mb-4">免费课程</h2>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {freeCourses?.slice(0, 6).map((course: any) => (
            <div key={course.id} className="bg-white rounded-lg shadow hover:shadow-lg transition">
              <img 
                src={course.thumbnail || 'https://via.placeholder.com/300x200'} 
                alt={course.title}
                className="w-full h-48 object-cover rounded-t-lg"
              />
              <div className="p-4">
                <h3 className="font-semibold text-lg mb-2">{course.title}</h3>
                <p className="text-gray-600 text-sm mb-2">{course.description}</p>
                <div className="flex justify-between items-center">
                  <span className="text-xl font-bold text-green-600">免费</span>
                  <Link 
                    to={`/courses/${course.id}`}
                    className="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700"
                  >
                    立即学习
                  </Link>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}